<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 公共部分 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            font-size: 100vw;
        }

        body {
            font-size: .034667rem;
        }

        .header {
            position: fixed;
            top: 0px;
            display: flex;
            width: 1rem;
            justify-content: space-between;
            height: .144rem;
            background-color: white;
        }

        .header .img1 {
            margin: .04rem .042667rem;
            width: .192rem;
            height: .064rem;
        }

        .header .img2 {
            margin: .026667rem .042667rem;
            width: .090667rem;
            height: .090667rem;
        }

        /* 主体 */
        .main-container {
            margin-top: .144rem;
        }

        /* 搜索框 */
        .search-container {
            padding: .04rem;
            background-color: white;
        }

        .search-box {
            display: flex;
            align-items: center;
            background-color: #f5f5f5;
            border-radius: .053333rem;
            padding: .021333rem .04rem;
        }

        .search-icon {
            color: #999;
            margin-right: .013333rem;
        }

        .search-input {
            flex: 1;
            border: none;
            outline: none;
            background: transparent;
            color: #333;
            font-size: .037333rem;
        }

        .search-btn {
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: .010667rem;
            padding: .016rem .032rem;
            font-size: .037333rem;
            margin-left: .026667rem;
        }

        /* 功能图标区域 */
        .features {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            padding: .04rem;
            background-color: white;
            margin-top: .026667rem;
        }

        .feature-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .feature-item img {
            width: .144rem;
            height: .144rem;
        }

        .feature-icon {
            width: .133333rem;
            height: .133333rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: .021333rem;
        }

        .feature-text {
            font-size: .037333rem;
            color: #333;
        }

        /* 广告横幅 */
        .banner-container {
            margin: .026667rem 0;
        }

        .banner {
            width: .8rem+.2rem;
            height: .2rem;
            padding: .010667rem .042667rem .034667rem .034667rem;
            display: flex;
            /* background-color: #fff9e6; */
            margin-bottom: .026667rem;
            display: block;

        }

        .banner-left {
            float: left;

        }

        .banner-right {
            float: right;

        }

        .banner .img {
            width: .448rem;
            height: .144rem;
        }


        /* 推荐职位区域 */
        .jobs-container {
            margin-top: .026667rem;
            background-color: white;
        }

        .jobs-title {
            padding: .032rem .04rem;
            font-size: .042667rem;
            font-weight: bold;
            border-bottom: 1px solid #f0f0f0;
        }

        .job-item {
            padding: .04rem;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            justify-content: space-between;
        }

        .job-info {
            flex: 1;
        }

        .job-name {
            font-size: .042667rem;
            font-weight: bold;
            margin-bottom: .021333rem;
            color: #333;
        }

        .job-company {
            margin-top: .066667rem;
            font-size: .032rem;
            color: #5a5959;
            margin-bottom: .021333rem;
        }

        .job-detail {
            font-size: .032rem;
            color: #999;
        }

        .money {
            margin-top: .026667rem;
            font-size: .034667rem;
            color: #ff6b60;
            font-weight: bold;
        }

        .time {
            font-size: .026667rem;
            color: #999;
            text-align: right;
            padding-top: .026667rem;
        }

        .footer-container {
            max-width: 3.2rem;
            margin: 0 auto;
            padding: 0 .04rem;
        }

        /* 热招城市 */
        .hot-cities {
            background-color: #fff;
            padding: .053333rem 0;

        }

        .cities-title {
            font-size: .042667rem;
            color: #333;

            padding-left: .04rem;
        }

        .cities-list {
            display: flex;
            flex-wrap: wrap;
            padding: 0 .04rem;
        }

        .city {
            margin-right: .04rem;

            font-size: .037333rem;
            color: #666;
            white-space: nowrap;
        }

        /* 底部导航 */
        .footer-nav {
            background-color: #fff;
            padding: .04rem 0;

        }

        .nav-list {
            display: flex;
            justify-content: space-around;
            padding: 0 .04rem;
        }

        .nav-item {
            font-size: .037333rem;
            color: #666;
            text-decoration: none;
        }

        /* 二维码区域 */
        .qrcode-container {
            background-color: #fff;
            padding: .053333rem 0;

            text-align: center;
        }

        .qrcode-group {
            display: flex;
            justify-content: center;
            margin-bottom: .04rem;
        }

        .qrcode-item {
            text-align: center;
            margin: 0 .08rem;
        }

        .qrcode-img {
            width: .213333rem;
            height: .213333rem;
            background-color: #f0f0f0;

        }

        .qrcode-img img {
            width: .213333rem;
            height: .213333rem;
        }

        .qrcode-text {
            font-size: 14px;
            color: #666;
        }

        /* 底部信息 */
        .footer-info {
            background-color: #fff;
            padding: .053333rem .04rem;
            text-align: center;
            font-size: .032rem;
            color: #999;
            line-height: 1.8;
        }

        .company-name {
            font-size: .037333rem;
            color: #666;
            margin-bottom: .013333rem;
        }
    </style>
</head>

<body>
    <div class="header">
        <img class="img1" src="https://img09.zhaopin.com/2012/other/mobile/msite/index/image/zhaopin-logo.png" alt="">
        <img class="img2" src="https://mypics.zhaopin.cn//avatar/2022/6/24/e9d0ccc8-c371-40b0-b144-f37e8d99aa71.png"
            alt="">
    </div>
    <div class="main-container">
        <div class="search-container">
            <div class="search-box">
                <span class="search-icon">🔍</span>
                <input type="text" class="search-input" placeholder="搜索公司/职位">
                <button class="search-btn">搜索</button>
            </div>
        </div>


        <div class="features">
            <div class="feature-item">
                <div class="feature-icon" style="background-color: #e6f7ff;">
                    <img src="	https://img09.zhaopin.com/2012/other/mobile/msite/index/image/search-icon.png" alt="">
                </div>
                <div class="feature-text">职位搜索</div>
            </div>
            <div class="feature-item">
                <div class="feature-icon" style="background-color: #e6ffed;">
                    <img src="https://img09.zhaopin.com/2012/other/mobile/msite/index/image/my-resume-icon.png" alt="">
                </div>
                <div class="feature-text">我的简历</div>
            </div>
            <div class="feature-item">
                <div class="feature-icon" style="background-color: #fff5e6;">
                    <img src="https://img09.zhaopin.com/2012/other/mobile/msite/index/image/my-interview-icon.png"
                        alt="">
                </div>
                <div class="feature-text">面试邀请</div>
            </div>
            <div class="feature-item">
                <div class="feature-icon" style="background-color: #e6f7ff;">
                    <img src="	https://img09.zhaopin.com/2012/other/mobile/msite/index/image/apply-feedback-icon.png"
                        alt="">
                </div>
                <div class="feature-text">投递反馈</div>
            </div>
            <div class="feature-item">
                <div class="feature-icon" style="background-color: #fff5e6;">
                    <img src="https://img09.zhaopin.com/2012/other/mobile/msite/index/image/resume-refresh-icon.png"
                        alt="">
                </div>
                <div class="feature-text">刷新简历</div>
            </div>
            <div class="feature-item">
                <div class="feature-icon" style="background-color: #ffe6e6;">
                    <img src="	https://img09.zhaopin.com/2012/other/mobile/msite/index/image/top-placement-icon.png"
                        alt="">
                </div>
                <div class="feature-text">简历置顶</div>
            </div>
            <div class="feature-item">
                <div class="feature-icon" style="background-color: #e6f0ff;">
                    <img src="	https://img09.zhaopin.com/2012/other/mobile/msite/index/image/resume-template-icon.png"
                        alt="">
                </div>
                <div class="feature-text">简历模板</div>
            </div>
            <div class="feature-item">
                <div class="feature-icon" style="background-color: #e6f7ff;">
                    <img src="	https://img09.zhaopin.com/2012/other/mobile/msite/index/image/enterprise-message-icon.png"
                        alt="">
                </div>
                <div class="feature-text">企业消息</div>
            </div>
        </div>


        <div class="banner-container">
            <div class="banner">
                <div class="banner-left">
                    <img class="img"
                        src="https://img09.zhaopin.com/2012/other/mobile/msite/index/image/gaoduan-background.png"
                        alt="">
                </div>
                <div class="banner-right">
                    <img class="img"
                        src="https://img09.zhaopin.com/2012/other/mobile/msite/index/image/xiaozhao-background.png"
                        alt="">
                </div>
            </div>
        </div>


        <div class="jobs-container">
            <div class="jobs-title">推荐职位</div>

            <div class="job-item">
                <div class="job-info">
                    <div class="job-name">客户助理</div>
                    <div class="job-detail">惠州 | 经验不限 | 大专</div>
                    <div class="job-company">跨越速运</div>
                </div>
                <div class="money-time">
                    <div class="money">6000-12000元</div>
                    <div class="time">2025-03-13</div>
                </div>
            </div>

            <div class="job-item">
                <div class="job-info">
                    <div class="job-name">抖音弹幕互动</div>
                    <div class="job-detail">全国 | 经验不限 | 学历不限</div>
                    <div class="job-company">德阳今玺文化传媒有限公司</div>
                </div>
                <div class="money-time">
                    <div class="money">300-500元/天</div>
                    <div class="time">2025-03-13</div>
                </div>
            </div>
            <div class="job-item">
                <div class="job-info">
                    <div class="job-name">日结果蔬分拣280/天</div>
                    <div class="job-detail">长沙 | 经验不限 | 学历不限</div>
                    <div class="job-company">湖南世恩人力资源有限公司</div>
                </div>
                <div class="money-time">
                    <div class="money">7000-9000元</div>
                    <div class="time">2025-03-13</div>
                </div>
            </div>
            <div class="job-item">
                <div class="job-info">
                    <div class="job-name">短视频运营（偏剪辑）双休</div>
                    <div class="job-detail">广州 | 经验不限 | 中专/中技</div>
                    <div class="job-company">广州粤惠信息科技有限公司</div>
                </div>
                <div class="money-time">
                    <div class="money">4000-7000元</div>
                    <div class="time">2025-03-13</div>
                </div>
            </div>
            <div class="job-item">
                <div class="job-info">
                    <div class="job-name">招杭州浙江省总工会干部学校保洁...</div>
                    <div class="job-detail">杭州 | 经验不限 | 学历不限</div>
                    <div class="job-company">广东君润人力资源服务有限公司</div>
                </div>
                <div class="money-time">
                    <div class="money">3000-4000元</div>
                    <div class="time">2025-03-13</div>
                </div>
            </div>
            <div class="job-item">
                <div class="job-info">
                    <div class="job-name">销售总监</div>
                    <div class="job-detail">成都 | 5-10年 | 本科</div>
                    <div class="job-company">临沂企承人力资源有限公司</div>
                </div>
                <div class="money-time">
                    <div class="money">2-3.5万</div>
                    <div class="time">2025-03-13</div>
                </div>
            </div>
            <div class="job-item">
                <div class="job-info">
                    <div class="job-name">居家兼职 提成日结</div>
                    <div class="job-detail">深圳 | 经验不限 | 学历不限</div>
                    <div class="job-company">德阳今玺文化传媒有限公司</div>
                </div>
                <div class="money-time">
                    <div class="money">8000-12000元</div>
                    <div class="time">2025-03-13</div>
                </div>
            </div>
            <div class="job-item">
                <div class="job-info">
                    <div class="job-name">直招坐岗巡逻保安秩序员6000</div>
                    <div class="job-detail">天津 | 经验不限 | 初中及以下</div>
                    <div class="job-company">天津嵘昇物业管理服务有限公司</div>
                </div>
                <div class="money-time">
                    <div class="money">5000-6000元</div>
                    <div class="time">2025-03-13</div>
                </div>
            </div>
            <div class="job-item">
                <div class="job-info">
                    <div class="job-name">新媒体运营专员</div>
                    <div class="job-detail">上海 | 1-3年 | 本科</div>
                    <div class="job-company">昂凯企业管理(上海)有限公司</div>
                </div>
                <div class="money-time">
                    <div class="money">8000-12000·13薪</div>
                    <div class="time">2025-03-13</div>
                </div>
            </div>
            <div class="job-item">
                <div class="job-info">
                    <div class="job-name">郑州必胜客管培生（灵活排班）</div>
                    <div class="job-detail">郑州 | 无经验 | 大专</div>
                    <div class="job-company">郑州肯德基有限公司</div>
                </div>
                <div class="money-time">
                    <div class="money">4000-5000元</div>
                    <div class="time">2025-03-13</div>
                </div>
            </div>
            <div class="job-item">
                <div class="job-info">
                    <div class="job-name">开年红包400 质检员一天280...</div>
                    <div class="job-detail">嘉兴 | 经验不限 | 学历不限</div>
                    <div class="job-company">浙江鸿富供应链管理有限公司</div>
                </div>
                <div class="money-time">
                    <div class="money">6000-7000元</div>
                    <div class="time">2025-03-13</div>
                </div>
            </div>
            <div class="job-item">
                <div class="job-info">
                    <div class="job-name">办公室内勤专员</div>
                    <div class="job-detail">大连 | 1-3年 | 大专</div>
                    <div class="job-company">大连静和教育咨询有限公司</div>
                </div>
                <div class="money-time">
                    <div class="money">4000-6000元</div>
                    <div class="time">2025-03-13</div>
                </div>
            </div>
            <div class="job-item">
                <div class="job-info">
                    <div class="job-name">综合内勤文员</div>
                    <div class="job-detail">昆明 | 1-3年 | 大专</div>
                    <div class="job-company">云南新理念汽车销售服务有限公司</div>
                </div>
                <div class="money-time">
                    <div class="money">4000-6000元</div>
                    <div class="time">2025-03-13</div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-container">

        <div class="hot-cities">
            <div class="cities-title">热招城市：</div>
            <div class="cities-list">
                <span class="city">北京招聘</span>
                <span class="city">天津招聘</span>
                <span class="city">上海招聘</span>
                <span class="city">重庆招聘</span>
                <span class="city">广州招聘</span>
                <span class="city">深圳招聘</span>
                <span class="city">青岛招聘</span>
                <span class="city">济南招聘</span>
                <span class="city">南京招聘</span>
                <span class="city">苏州招聘</span>
                <span class="city">郑州招聘</span>
                <span class="city">成都招聘</span>
                <span class="city">西安招聘</span>
                <span class="city">大连招聘</span>
                <span class="city">杭州招聘</span>
                <span class="city">长沙招聘</span>
                <span class="city">武汉招聘</span>
                <span class="city">合肥招聘</span>
                <span class="city">沈阳招聘</span>
                <span class="city">太原招聘</span>
                <span class="city">厦门招聘</span>
                <span class="city">南昌招聘</span>
                <span class="city">南宁招聘</span>
                <span class="city">海口招聘</span>
                <span class="city">贵阳招聘</span>
                <span class="city">昆明招聘</span>
                <span class="city">哈尔滨招聘</span>
                <span class="city">石家庄招聘</span>
            </div>
        </div>


        <div class="footer-nav">
            <div class="nav-list">
                <a href="#" class="nav-item">首页</a>
                <a href="#" class="nav-item">我的智联</a>
                <a href="#" class="nav-item">用户反馈</a>
                <a href="#" class="nav-item">法律协议</a>
                <a href="#" class="nav-item">资质公示</a>
            </div>
        </div>


        <div class="qrcode-container">
            <div class="qrcode-group">
                <div class="qrcode-item">
                    <div class="qrcode-img">
                        <img src="https://img09.zhaopin.cn/2012/other/mobile/m/official-account/app-down.png" alt="">
                    </div>
                    <div class="qrcode-text">APP下载</div>
                </div>
                <div class="qrcode-item">
                    <div class="qrcode-img">
                        <img src="./二维码" alt="">
                    </div>
                    <div class="qrcode-text">关注公众号</div>
                </div>
            </div>
        </div>

        <!-- 底部信息 -->
        <div class="footer-info">
            <div class="company-name">智联招聘，更懂你的价值</div>
            <div>客服热线和举报热线: 400-885-9898</div>
            <div>关爱未成年人举报电话: 400-885-9898-7</div>
            <div>朝阳区人力资源与社会保障局监督电话: 010-57596212，010-6509938</div>
            <div>© 2022 zhaopin.com</div>
            <div>网上有害信息举报专区</div>
        </div>
    </div>
</body>

</html>